<!-- 商品赠送 -->
<template>
	<view class="giveGoods">
		<view class="title">赠送</view>
		<radio-group class="group" @change="changeCheck">
			<label class="label" v-for="item in list" :key="item.id">
				<radio :value="item.id"  style="transform: scale(.7);" color="#ffc9aa"/>
				<!-- <checkbox  style="transform: scale(.7);border-radius: 50%;" /> -->
				<image class="avatar" :src="item.avatar" alt=""></image>
				<view class="name">{{item.user_name}}</view>
			</label>
		</radio-group>
		<view class="btn" @click="submit">确认赠送</view>
		<image class="close" @click="close" src="@/static/images/close.png"></image>
	</view>
</template>

<script>
	export default {
		props: {
			goodsIds: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		data() {
			return {
				list: [],
				giveIds: []
			}
		},
		mounted() {
			this.getData()
		},
		methods: {
			changeCheck(e) {
				console.log('e', e);
				this.giveIds = e.detail.value
			},
			submit() {
				this.$api.backpackChangegoods({
					to_user: this.giveIds,
					goods_ids: this.goodsIds.join(',')
				}).then(res => {
					uni.showToast({
						title: res,
						duration: 3000,
						icon: 'none'
					})
					this.$emit('close')
				}).catch(err => {
					uni.showToast({
						title: err,
						duration: 3000,
						icon: 'none'
					})
				})
			},
			getData() {
				this.$api.activity_liveone().then(res => {
					this.list = res

				})
			},
			close() {
				this.$emit('close')
			}
		}
	}
</script>

<style scoped lang="scss">
	.giveGoods {
		width: 80vw;
		height: 60vh;
		padding: 20rpx;
		box-sizing: border-box;
		background-color: #fff;
		position: relative;

		.title {
			font-size: 32rpx;
			font-weight: bold;
			text-align: center;
			margin-bottom: 20rpx;
		}

		.close {
			width: 60rpx;
			height: 60rpx;
			position: absolute;
			left: 50%;
			bottom: -100rpx;
			transform: translateX(-50%);
		}

		.btn {
			width: 252rpx;
			height: 72rpx;
			background: linear-gradient(#ff9526, #ffbc54);
			border-radius: 36rpx;
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #FFFFFF;
			@include center;
			margin: 20rpx auto;
		}

		.group {
			display: flex;
			flex-direction: column;
			height: 80%;
			overflow-y: auto;

			::v-deep.label {
				padding: 20rpx;
				display: flex;
				align-items: center;

				uni-checkbox {
					.uni-checkbox-input {
						border-radius: 50%;
					}
				}

				.avatar {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					margin-right: 30rpx;
					margin-left: 30rpx;
					border: 1rpx solid #ddd;
				}

				.name {
					font-size: 28rpx;
					line-height: 32rpx;
				}

			}

		}

	}
</style>
